<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>登录页</title>
    <link href="../css/base.css" rel="stylesheet" type="text/css">
    <link href="../css/toefl.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/jQuery.js"></script>


</head>

<body>

<div class="doc1180">
    <div class="header">
        <div class="logo"><a th:href="@{/index}"><img th:src="@{/img/logo.png}"></a></div>
        <div class="headerUser">
            <ul>
                <li class="headerUserPic"><a href="###"><img th:src="@{/img/30x30.png}"></a></li>
                <li class="headerUserName"><a href="个人资料/普通用户-首页.html" th:text="${session.USER_SESSION_KEY.userName}"
                                              target="ifr"></a></li>
                <li class="headerUserNotice">通知<a href="###">14</a></li>
            </ul>
        </div>
        <div class="headerLink">
            <a th:href="@{/security/toLogin}" class="###">登录</a>
            <a th:href="@{/user/toInput}" class="###">注册</a>
        </div>
    </div>
</div>
<div class="menu">
    <div class="doc1180">
        <div class="menuLink">
            <ul class="fn-clear">
                <li class="active"><a th:href="@{/main.html}" target="ifr">首页</a></li>
                <li><a th:href="@{/托福人/托福人.html}" target="ifr">托福人</a></li>
                <li><a th:href="@{/公开课/main.html}" target="ifr">公开课</a></li>
                <li><a th:href="@{/群组聊/组群聊-组群聊.html}" target="ifr">群组聊</a></li>
                <li><a th:href="@{/福利城堡/福利城堡-福利城堡.html}" target="ifr">福利城堡</a></li>
            </ul>
        </div>
        <div class="fenxiang">
            <a href="#" class="weibo"><img th:src="@{/img/weibo.png}"></a>
            <a href="#" class="weixin"><img th:src="@{/img/weixin.png}"></a>
        </div>
    </div>
</div>

<div class="doc1180">
    <div class="login">
        <div class="login_left">
            <form th:action="@{/user/create}" method="post" th:object="${user}">
                <div class="login_sr"><input type="text" id="userName" name="userName" class="login_inputYhm"
                                             placeholder="用户名"></div>
                <div class="login_sr"><input type="password" id="userPwd" name="userPwd" class="login_inputMm"
                                             placeholder="密码"></div>
                </div>

                <div class="login_sr fn-clear"><input id="inputCode" style="float:left;" type="text"
                                                      class="login_inputYzm" placeholder="验证码">
                    <div class="login_inputYzmPic">
                        <div id="checkCode" class="code" onclick="createCode(4)"></div>
                    </div>
                    <span class="code_span" onclick="createCode(4)">看不清换一张</span></div>

                <div class="login_xieyi"><input id="login_xieyi" type="checkbox"
                                                style="margin-right:10px; vertical-align:middle;">我同意<a href="###">《人人托福网服务协议》</a>
                </div>
                <button class="b" type="submit"><a type="submit" class="login_Button"> 登 录 </a></button>
                <div class="login_zcymm"><span>已有帐号？</span><a href="###">马上登录</a><a href="###"
                                                                                    class="login_zhmm">找回密码</a>
                </div>
            </form>
            <div class="login_right">
                <div class="login_rightH3">您也可以使用以下方式登录：</div>
                <div class="login_sanfang"><a href="###"><img src="../img/login_wb.png">新浪微博</a></div>
                <div class="login_sanfang"><a href="###"><img src="../img/login_qq.png">QQ登录</a></div>
                <div class="login_sanfang"><a href="###"><img src="../img/login_qw.png">腾讯微博</a></div>
                <div class="login_sanfang"><a href="###"><img src="../img/login_rr.png">人人网</a></div>
                <div class="login_shouquan">授权后表明你已同意 <a href="###">《人人托福网服务协议》</a></div>
            </div>
        </div>
    </div>
    <div class="flink">
        <div class="flinkTop"></div>
        <div class="flinkBody">
            <h3>友情链接</h3>
            <ul>
                <li>友情连接友情连接</li>
                <li>友情连接友情连接</li>
                <li>友情连接友情连接</li>
                <li>友情连接友情连接</li>
                <li>友情连接友情连接</li>
                <li>友情连接友情连接</li>
                <li>友情连接友情连接</li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <div class="doc1180">
            <div class="footerLink">
                <a href="###">人人托福</a>|
                <a href="###">联系我们</a>|
                <a href="###">招聘信息</a>|
                <a href="###">合作媒体</a>|
                <a href="###">意见反馈</a>|
                <a href="###">版权说明</a>
            </div>
            <div class="footerTxet">©2014 – xuanke.com All rights reserved. 京ICP备14022672号-1</div>
        </div>
    </div>

    <!--验证码处理-->
    <script>
        //页面加载时，生成随机验证码
        window.onload = function () {
            createCode(4);
        }

        //生成验证码的方法
        function createCode(length) {
            var code = "";
            var codeLength = parseInt(length); //验证码的长度
            var checkCode = document.getElementById("checkCode");
            ////所有候选组成验证码的字符，当然也可以用中文的
            var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
                'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
                'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
            //循环组成验证码的字符串
            for (var i = 0; i < codeLength; i++) {
                //获取随机验证码下标
                var charNum = Math.floor(Math.random() * 62);
                //组合成指定字符验证码
                code += codeChars[charNum];
            }
            if (checkCode) {
                //为验证码区域添加样式名
                checkCode.className = "code";
                //将生成验证码赋值到显示区
                checkCode.innerHTML = code;
            }
        }

        //检查验证码是否正确
        function validateCode() {
            //获取显示区生成的验证码
            var checkCode = document.getElementById("checkCode").innerHTML;
            //获取输入的验证码
            var inputCode = document.getElementById("inputCode").value;
            console.log(checkCode);
            console.log(inputCode);
            if (inputCode.length <= 0) {
                alert("请输入验证码！");
            } else if (inputCode.toUpperCase() != checkCode.toUpperCase()) {
                alert("验证码输入有误！");
                createCode(4);
            } else {
                // alert("验证码正确！");
            }
        }
    </script>
    <script th:inline="javascript">

        $(function () {
            //删除操作
            $(".delete").click(function () {
                var href = $(this).attr("href");
                if (confirm("确定要删除吗?")) {
                    $("form:eq(0)").attr("action", href).submit();
                    return false;
                }
            });

            $(".b").click(function () {
                //协议检测
                var login_xieyi = document.getElementById("login_xieyi");
                console.log("xieyi status:" + login_xieyi.checked);
                if (!login_xieyi.checked) {
                    alert("请先阅读并同意《人人托福网服务协议》！");
                    return false;
                }
                // 信息完整检测
                console.log("userName: " + document.getElementById("userName").value);
                console.log("userPwd: " + document.getElementById("userPwd").value);
                console.log("userEmail: " + document.getElementById("userEmail").value);
                console.log(document.getElementById("userName").value.length <= 0)
                if (document.getElementById("userName").value.length <= 0) {
                    alert("请输入用户名！");
                    return false;
                }
                if (document.getElementById("userPwd").value.length <= 0) {
                    alert("请输入密码！");
                    return false;
                }
                if (document.getElementById("userEmail").value.length <= 0) {
                    alert("请输入邮箱！");
                    return false;
                }

                //获取显示区生成的验证码
                var checkCode = document.getElementById("checkCode").innerHTML;
                //获取输入的验证码
                var inputCode = document.getElementById("inputCode").value;
                console.log(checkCode);
                console.log(inputCode);
                if (inputCode.length <= 0) {
                    alert("请输入验证码！");
                    return false;
                } else if (inputCode.toUpperCase() !== checkCode.toUpperCase()) {
                    alert("验证码输入有误！");
                    createCode(4);
                    return false;
                } else {
                    // alert("验证码正确！");
                }

                var href = $(this).attr("href");
                $("form:eq(0)").attr("action", href).submit();
                return false;

            });

            $(".update").click(function () {
                var href = $(this).attr("href");
                $(location).attr("href", href);
            });

            $(".info").click(function () {
                var href = $(this).attr("href");
                $(location).attr("href", href);

            });


        });

    </script>

</body>
</html>
